@import "variables";
@import "mixins";

#mapview {

  .view-header {

    .hd-btn {
      width: 100px;
    }
  }

  .btn-zoom-in {
    top: 5px;
    left: 5px;
  }

  .btn-zoom-out {
    top: 105px;
    left: 5px;
  }

  .btn-pan-left {
    top: 40%;
    left: 5px;
  }

  .btn-pan-right {
    top: 40%;
    right: 5px;
  }

  .btn-pan-up {
    top: 5px;
    left: 45%;
  }

  .btn-pan-down {
    bottom: 5px;
    left: 45%;
  }

  .content-btn {
    cursor: pointer;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    color: #888;
    font-size: 20px;
    text-align: center;
    background: #dddddd;
    border: 3px solid #bbb;
    opacity: 0.9;

    .border-radius(25px);
  }

  .content-btn.active {
    color: white;
    background: red;
  }

  .df-record-btn {
    left: 10px;
    bottom: 10px;
  }
}